import { Button, FormInstance, Result } from 'antd'
import React, { useRef } from 'react'
import ProTable, { ActionType, TableDropdown } from '@ant-design/pro-table'
import { HttpQueryBranch, HttpSaveBranch, HttpDeleteBranch, HttpQueryCompanyOption } from '@/services'
import { branchColumns } from './config'
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
import { PlusOutlined } from '@ant-design/icons'

const VersionBranchPage: React.FC<{}> = () => {
    const actionRef = useRef<ActionType>()
    const onDelete = async (branchid: any, row: IT.IVersionBranch) => {
        const { flag, message } = await HttpDeleteBranch({ branchid })
        if (flag !== 1) {
            throw new Error(message)
        }
        return true
    }
    const onSave = async (id: any, row: IT.IVersionBranch) => {
        const { flag, message } = await HttpSaveBranch({
            branch: row.branch,
            branchCur: row.branchCur,
            companyid: row.companyid,
        })
        if (flag !== 1) {
            throw new Error(message)
        }
        return true
    }
    const onFinish = async (values: any) => {
        const { flag } = await HttpSaveBranch(values)
        if (flag == 1) {
            actionRef.current?.reload()
            return true
        }
    }
    return (
        <ProTable<IT.IVersionBranch>
            {...{
                actionRef,
                columns: branchColumns,
                rowKey: 'branchid',
                size: 'small',
                bordered: true,
                dateFormatter: 'string',
                headerTitle: '分支管理',
                search: { labelWidth: 'auto' },
                pagination: { pageSize: 50 },
                request: async (params = {}) => await HttpQueryBranch(params),
                editable: {
                    type: 'multiple',
                    onDelete,
                    onSave,
                },
                toolBarRender: () => [
                    <ModalForm
                        {...{
                            onFinish,
                            modalProps: { centered: true },
                            width: 'auto',
                        }}
                        trigger={
                            <Button type='primary'>
                                <PlusOutlined />
                                新增分支
                            </Button>
                        }>
                        <ProFormText
                            {...{
                                width: 'lg',
                                name: 'branch',
                                label: '分支',
                                placeholder: '请输入分支',
                                rules: [{ required: true, message: '请输入分支' }],
                            }}
                        />
                        <ProFormSelect
                            {...{
                                width: 'lg',
                                name: 'companyid',
                                label: '客户',
                                placeholder: '请选择客户',
                                rules: [{ required: true, message: '请选择客户' }],
                                request: async () => {
                                    const { data } = await HttpQueryCompanyOption()
                                    return data || []
                                },
                            }}
                        />
                        <ProFormSelect
                            {...{
                                width: 'lg',
                                name: 'branchCur',
                                label: '环境',
                                placeholder: '请选择分支',
                                rules: [{ required: true, message: '请选择分支' }],
                                valueEnum: {
                                    开发环境: '开发环境',
                                    预发环境: '预发环境',
                                    生产环境: '生产环境',
                                },
                            }}
                        />
                    </ModalForm>,
                ],
            }}
        />
    )
}
export default VersionBranchPage
